﻿<!--上传插件-->
<script src="/static/js/jquery-2.1.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<!--<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>-->


<!--&lt;!&ndash;需要注释代码&ndash;&gt;-->
<!--<link href="/static/layui/css/layui.css" rel="stylesheet"/>-->
<!--<script src="/static/layui/layui.js"></script>-->
<!--&lt;!&ndash;引用layui弹框插件&ndash;&gt;-->

<!--<script src="/static/js/yii.js"></script>-->

<!--<link href="/static/css/fileinput.css" rel="stylesheet"/>-->
<!--<script src="/static/js/fileinput.js"></script>-->
<!--<script src="/static/js/fileinput_locale_zh.js" type="text/javascript"></script>-->

<script src="/static/js/jquery-form.js"></script>

<!--需要注释代码end-->

<style>
    .modal-content{width: 610px!important;}
    .material-head{display: inline-block;width:100%;border-bottom:1px #ccc dashed;padding-bottom:15px;}
    .material-body{display: inline-block;width:100%;margin-top:15px;}
    .group{display: block}
    .new_add{display:inline-block;width:100%;}
    .group li{font-size:12px;line-height:35px;border-bottom:1px #ccc solid;padding-left:5px;}
    /*.modal-body{min-height:650px;}*/
    .newimages{text-align: center;margin-bottom:15px;}
    .newimages span{position: absolute;bottom:0px;background-color: #0f0f0f;display: inline-block;width:100%;left: 0px;text-align: center;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;color:#fff;line-height:20px;height:20px;overflow: hidden}
    .newimages img{max-width:100%;max-height:100%;}
    .newimages .newimages_content{width:85px;height:85px;margin: auto;position: relative;line-height: 85px;}
    .material-head-serach select{height:25px;border-radius:5px;}
    .group i{float: right;line-height:35px}
    .group input{width:100%;height:30px;line-height:30px;}
    .group input,.group a{display: none;font-size:12px;}
    .group a{margin-right:8px;}
    .active{background-color:#f1f1f1;}
    .newimages .active{border:2px #1E9FFF solid;}
    .row_left{height:405px;border-right:1px #ccc solid;display: block}
</style>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" close="true">
        <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title">
        <span class="fa fa-legal"></span>&nbsp;图片
    </h4>
</div>
<style>


</style>
<div class="modal-body caption">

    <div class="material-head">
        <form action="javascript:;" class="col-sm-8 material-head-serach">
            <select name="year" id="year" >
                <option value="0">不限年份</option>
                {volist name="year" id="vo"}
                <option value="{$vo}">{$vo}</option>
                {/volist}
            </select>
            <select name="month" id="month" >
                <option value="0">不限月份</option>
                {volist name="month" id="vo"}
                <option value="{$vo}">{$vo}</option>
                {/volist}
            </select>
            <button class="btn btn-primary btn-xs" id="js_serach" >搜索</button>
        </form>

        <div class="col-sm-4">
            <input class="btn btn-danger btn-xs" id="new_delete" type="submit" value="删除">
            <input class="btn btn-primary btn-xs" id="new_upload" type="submit" value="上传图片">
            <form id="new_form" method="post" enctype="multipart/form-data" style="display: none">
                <input name="filesToUpload[]" accept="image/*" id="settlement_authorize" data-show="showsettlement_authorize" data-for="settlement_authorize"
                       class=" weui-uploader__input input_multifileSelect" type="file" multiple>
            </form>
        </div>
    </div>

    <div class="material-body row">
        <div class="col-sm-3 row_left">
            <div class="new_add">
                <button class="btn-info btn col-sm-12 btn-xs" id="add_group">添加分组</button>
            </div>
            <div class="group">
                <ul id="group">
                    <li>全部<a class="confirm" data-id="0">确定</a></li>
                    <li>未分组<a class="confirm" data-id="-1">确定</a></li>
                    <li>其他<a class="confirm" data-id="-2">确定</a></li>
                    {volist name="group" id="vo"}
                    <li>
                        <span>{$vo.name}</span>
                        <i class="glyphicon glyphicon-edit"></i>
                        <input type="text" value="{$vo.name}" >
                        <a class="confirm" data-id="{$vo.id}">确定</a>
                        <a class="delete" data-id="{$vo.id}">删除</a>
                        <a class="cancel">取消</a>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>

        <div class=" col-sm-9">

            <div class="data-area" id="data-area" style="height:365px;">

            </div>
<!--            <div id="pageBar">&lt;!&ndash;这里添加分页按钮栏&ndash;&gt;</div>-->
            <nav aria-label="Page navigation" style="text-align: center">
                <ul class="pagination" style="margin:0px;">
                </ul>
            </nav>


        </div>

    </div>

</div>
<div class="modal-footer">
    <button type="button" class="layui-btn layui-btn-primary js_quit" close="true">关闭</button>
    <button type="button" class="layui-btn js_add" _event="{$type}" data-val="{$newkey}">保存</button>
</div>
<script>
    $("#js_serach").click(function () {
        turnPage(1);
    });

    //获取数据
    var curPage;        //当前页数
    var totalItem;      //总记录数
    var pageSize;       //每一页记录数
    var totalPage;      //总页数

    function turnPage(page) {

        if($("#group").find(".active .confirm").attr("data-id")==undefined){
            var group_id = 0;
        }else{
            var group_id = $("#group").find(".active .confirm").attr("data-id");
        }
        var year = $("#year").val();
        var month = $("#month").val();
        $.ajax({
            type: 'get',
            url: "{:URL('/common/upload/ajaxlist')}",     //这里是请求的后台地址，自己定义
            data: {'curPage': page,'group_id':group_id,'year':year,'month':month},
            dataType: 'json',
            beforeSend: function () {
                // $("#data-area").append("加载中...");
            },
            success: function (data) {
                totalItem = data.totalItem; // 返回的总记录数
                pageSize = data.pageSize; //返回的每一页记录数
                curPage = page; //返回的当前页码
                totalPage = data.totalPage; //返回的总页数
                var data_content = data.data_content; //返回的数据内容
                var data_html = ""; //数据输出的html代码
                //添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表）
                $.each(data_content, function (index, array) {
                    data_html += '<div class="col-sm-4 newimages"><div class="newimages_content"><img data-id="'+array['id']+'" src="'+array['path']+'"> <span>'+array['name']+'</span></div></div>';


                }); //遍历数据，形成html代码



                $(".data-area").html(data_html); //输出html代码
                getPageBar();
            },
            /*            complete: function() {    //添加分页按钮栏
                           getPageBar();
                        },*/
            error: function () {
                alert("数据加载失败");
            }
        });
    };

    function getPageBar() {
        //防止数据错误时候出现当前页数大于总页数
        if (curPage > totalPage) {
            curPage = totalPage;
        }
        //防止数据错误时候出现当前页数小于第一页
        if (curPage < 1) {
            curPage = 1;
        }
        //定义分页按钮html代码
        pageBar = "";
        //如果不是第一页

        if (curPage != 1) {
            pageBar += "<li><a href='javascript:turnPage(1)' aria-label='Previous'> <span aria-hidden='true'>首页</span></a></li>";
            pageBar += "<li><a href='javascript:turnPage("+(curPage-1)+")' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
        }else{
            pageBar += "<li><a href='javascript:turnPage(1)' aria-label='Previous'> <span aria-hidden='true'>首页</span></a></li>";
            pageBar += "<li><a href='javascript:;' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
        }

        //定义start 和end两个变量准备循环输出可见的分页按钮
        var start, end;
        if (totalPage <= 5) {
            start = 1;
            end = totalPage;
        } else {
            //当前页码与总页数相差1个的时候，要显示之前的页码
            if (totalPage - curPage < 2) {
                start = totalPage - 4;
                end = totalPage;
            } else {
                if(curPage>5){
                    //显示前面两个和后面两个
                    start = curPage - 2;
                    end = curPage + 2;
                }else{
                    //显示前面两个和后面两个
                    start = 1;
                    end = 5;
                }
            }
        }

        for (var i = start;i<=end;i++){
            pageBar += "<li><a href='javascript:turnPage("+i+")'>"+i+"</a></li>"
        }

        //如果不是最后页,显示输出“下一页 ， 末页”
        if (curPage != totalPage) {
            pageBar += "<li><a href='javascript:turnPage(" + (parseInt(curPage) + 1) + ")' aria-label='Next'> <span aria-hidden='true'>&raquo;</span></a></li>";
            pageBar += "<li><a href='javascript:turnPage(" + totalPage + ")' aria-label='Previous'> <span aria-hidden='true'>末页</span></a></li>";
        }else {
            pageBar += "<li><a href='javascript:;' aria-label='Next'> <span aria-hidden='true'>&raquo;</span></a></li>";
            pageBar += "<li><a href='javascript:turnPage(" + totalPage + ")' aria-label='Previous'> <span aria-hidden='true'>末页</span></a></li>";
        }


        $(".pagination").html(pageBar);
    }



    $(function () {
        turnPage(1);
        //图片上传
        $("#new_upload").click(function () {
            $("#settlement_authorize").click();
        });


        $(".js_add").click(function () {
            $(".js_quit").click();
        });

        $('.input_multifileSelect').on('change', function () {
            if($("#group").find(".active .confirm").attr("data-id")==undefined){
                var group_id = 0;
            }else{
                var group_id = $("#group").find(".active .confirm").attr("data-id");
            }
            var ajax_option = {
                url: "{:URL('/common/upload/upload')}?group_id=" + group_id,
                type : 'post',
                success: function (data) {
                    turnPage(1);
                    // showUploadedImgs(data.uploadedFiles, step, showdiv, "{{url("/staff/file/delete/{$data->ordersn}")}}", stion);
                }
            }
            $("#new_form").ajaxSubmit(ajax_option);
        });


        //添加分组
        $("#add_group").click(function () {
            var name = "未命名";
            $.ajax({
                type: "post",
                url: "{:URL('common/upload/addGroup')}",
                data: {name:name},
                dataType: "json",
                success: function(data){
                    if(data.code==0){
                        var html = '<li>\n' +
                            '                        <span>未命名</span>\n' +
                            '                        <i class="glyphicon glyphicon-edit"></i>\n' +
                            '                        <input type="text" value="未命名" >\n' +
                            '                        <a class="confirm" data-id="'+data.id+'" >确定</a><a class="delete" data-id="'+data.id+'">删除</a><a class="cancel">取消</a>\n' +
                            '                    </li>';
                        $("#group").append(html);
                    }
                }
            });
        });

        //删除分组
        $("#group").on('click','.delete',function(){
            var id = $(this).attr("data-id");
            var newthat = $(this);
            $.ajax({
                type: "post",
                url: "{:URL('common/upload/delGroup')}",
                data: {id:id},
                dataType: "json",
                success: function(data){
                    if(data.code==0){
                        newthat.parent().remove();
                    }
                }
            });
        });

        //修改操作
        $("#group").on('click','.confirm',function(){
            var id = $(this).attr("data-id");
            var newthat = $(this);
            var name = $(this).parent().find("input").val();
            $.ajax({
                type: "post",
                url: "{:URL('common/upload/addGroup')}",
                data: {id:id,name:name},
                dataType: "json",
                success: function(data){
                    if(data.code==0){
                        newthat.parent().find("span").html(name);
                        newthat.parent().find("input").val(name);
                        newthat.parent().find("input").hide();
                        newthat.parent().find("a").hide();
                        newthat.parent().find("span").show();
                    }
                }
            });
        });


        $("#group").on('click','.glyphicon-edit',function(){
            $(this).parent().find("input").show();
            $(this).parent().find("a").show();
            $(this).parent().find("span").hide();
            $(this).parent().siblings().find("a").hide();
            $(this).parent().siblings().find("input").hide();
            $(this).parent().siblings().find("span").show();
        });

        //取消操作
        $("#group").on('click','.cancel',function(){
            $(this).parent().find("input").hide();
            $(this).parent().find("a").hide();
            $(this).parent().find("span").show();
        });

        //选中操作
        $("#group").on('click','li',function(){
            $(this).addClass("active")
            $(this).siblings().removeClass("active")
            turnPage(1);
        });
    });


    $(".data-area").on('click','.newimages',function(){
        $(this).find(".newimages_content").toggleClass("active");
    })

    //删除图片操作
    $("#new_delete").click(function () {
        var images = '';
        $(".data-area .newimages .active img").each(function(){
            images += $(this).attr('data-id')+":"+$(this).attr('src')+";";
        });

        $.ajax({
            type: "post",
            url: "{:URL('common/upload/delImages')}",
            data: {images:images},
            dataType: "json",
            success: function(data){
                turnPage(1);
            }
        });
    });


</script>